const app = getApp();
const utils = require("../../js/utils");
import * as echarts from '../../components/ec-canvas/echarts';

let charInstance = null;

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  charInstance = chart;
  canvas.setChart(chart);
  return chart;
}

// pages/chart/chart.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 是否显示骨架屏
    loading: false,

    // 切换按年查询, 按月查询, 按日查询
    toggle: 1,
    toggledate: "按日查询",
    toggle_icon_text: "日",

    // 选择查询的事件
    date: "选择日期",
    currenDate: "",

    // 限制选择的日期时间
    startDate: '',
    endDate: "",


    // 默认高亮的标签栏
    main_type_active: 0,

    // 收入-支出标签栏
    mainType: [{
        title: "收入",
        type: "sr",
        total: 0,
        total2: 0
      },
      {
        title: "支出",
        type: "zc",
        total: 0,
        total2: 0
      }
    ],

    // 处理分类之后的数据
    booking_data: {},

    // 饼图
    ec: {
      onInit: initChart
    }
  },

  // 切换按年查询, 按月查询, 按日查询
  Toggle() {
    if (this.data.toggle === 0) {
      this.data.toggledate = '按日查询'
      this.data.toggle = 1
      this.data.toggle_icon_text = "日"
    } else if (this.data.toggle === 1) {
      this.data.toggledate = '按月查询'
      this.data.toggle_icon_text = "月"
      this.data.toggle = 2
    } else if (this.data.toggle === 2) {
      this.data.toggledate = '按年查询'
      this.data.toggle_icon_text = "年"
      this.data.toggle = 0
    }
    this.setData({
      toggledate: this.data.toggledate,
      toggle_icon_text: this.data.toggle_icon_text
    })
    this.judge_date_format()
  },
  // 判断是否按年查询  按月查询   按日查询 并且将显示的日期切割成需要的形式 的方法
  judge_date_format() {
    // 将选择到的日期传进来 切割成数组
    let d = this.data.date.split("-");
    
    // 用来存储处理后的时间格式
    let date = ""
    if (this.data.toggledate === "按日查询") {
      date = d.join("-")
    }
    if (this.data.toggledate === "按月查询") {
      date = `${d[0]}-${d[1]}`
      
    }
    if (this.data.toggledate === "按年查询") {
      date = `${d[0]}`
      
    }
    
    this.setData({
      currenDate: date
    })

    // 调用根据年月日进行查询记账记录
    this.get_booking_by_date()
  },
  // 选择日期
  select_date(e) {
    if (this.data.date === e.detail.value) {
      
      return
    };
    this.setData({
      date: e.detail.value
    })
    // 调用 判断是否按年查询  按月查询   按日查询 并且将显示的日期切割成需要的形式 的方法
    this.judge_date_format()

  },
  // 限制选择的日期时间
  limit_select_end_date() {
    let date = new Date()
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    m = m < 10 ? `0${m}` : m
    let r = date.getDate();
    r = r < 10 ? `0${r}` : r

    let end = `${y}-${m}-${r}`
    this.setData({
      endDate: end,
      startDate: app.globalData.startDate,
      currenDate: end,
      date: end
    })

  },
  // 根据年月日进行查询记账记录
  get_booking_by_date() {
    // 清楚收入 支出的总金额
    this.data.mainType.forEach(v => {
      v.total = 0;
      v.total2 = 0;
    })
    // 开始查询的时间
    let startDate = "";
    let endDate = "";

    // 拿到今天的时间
    let today = this.today_time(new Date()).split("-");

    // 用户选择的日期
    let userdate = this.data.currenDate.split("-");
    

    // 判断是否为按年查询
    if (this.data.toggledate === "按年查询") {
      startDate = `${userdate[0]}-01-01`
      // 判断是否为同年查询  同年的查询日期格式为 当年-01-01 至  当年-当天-当日
      if (today[0] === userdate[0]) {
        endDate = today.join("-")

      } else {
        endDate = `${userdate[0]}-12-31`
      }
    } else if (this.data.toggledate === "按月查询") { // 按月查询 
      // 查询范围在 当年-当月-01 至 当年当月当日
      startDate = `${userdate[0]}-${userdate[1]}-01`
      // 判断是否同年
      if (today[0] === userdate[0]) {
        // 判断是否同月
        if (today[1] === userdate[1]) {
          endDate = today.join("-")
        } else {
          let d1 = this.today_time(new Date(userdate[0], userdate[1], 0));
          endDate = d1
          
        }
      } else { // 不同年
        let d1 = this.today_time(new Date(userdate[0], userdate[1], 0));
        endDate = d1
      }
    } else { // 按日查询
      startDate = userdate.join("-")
    }
    
    
    // 发起请求数据
    // 定义一下data的参数
    let data = {
      startDate
    }
    if (endDate) {
      data.endDate = endDate;
    }
    // 加载提示
    wx.showLoading({
      title: '加载中',
    })
    // 调用云函数将记账数据写入数据库
    wx.cloud.callFunction({
      name: "get_currentMonthData",
      data
    }).then(res => {
      
      let booking_data = {
        sr: {
          main_data: []
        },
        zc: {
          main_data: []
        }
      }
      // 遍历  将数据分成两大类  收入和支出
      res.result.data.forEach(v => {
        booking_data[v.maintype.type].main_data.push(v);
      })

      // 统计收入支出的总金额
      this.data.mainType.forEach(v => {
        // 
        res.result.data.forEach(value => {
          if (v.type === value.maintype.type) {
            v.total += Number(value.money)
            v.total2 +=  Number(value.money)
          }
        })
        v.total2 = utils.addThousands(v.total2)
      })


      //  遍历存储两大类的booking_data
      for (let key in booking_data) {
        // data 存入booking_data
        let data = booking_data[key].main_data;
        // 遍历收入支出两大类 并且处理两大类的数据  将相同的子类型进行合并  
        // 金额total相加 一条数据等于一笔记录, 进行笔数count相加
        booking_data[key].subData = {}
        // 遍历已经分类好的数据  分类或者支出 进行二次处理 合并相同支出收入类型 
        data.forEach(v => {
          if (!booking_data[key].subData[v.mainChildrenType.type]) {
            booking_data[key].subData[v.mainChildrenType.type] = {
              // 主类型(收入-支出)
              type: key,
              // 笔数
              count: 1,
              // 住房  餐饮等类型
              title: v.mainChildrenType.titlt,
              // 总金额
              total: Number(v.money),
              // 图标
              icon: v.mainChildrenType.icon,
              // 颜色
              color: utils.createRandomColor(),
              // 保存子类型的数据
              data: [v],
              // 百分比
              percont: 0,
              // 绘制饼图需要的字段
              name: v.mainChildrenType.titlt,
              value: Number(v.money),

              // 获取id
              ids: [v._id]
            }
          } else { // 如果存在子类型
            booking_data[key].subData[v.mainChildrenType.type].count++;
            booking_data[key].subData[v.mainChildrenType.type].total += Number(v.money)
            booking_data[key].subData[v.mainChildrenType.type].data.push(v);
            booking_data[key].subData[v.mainChildrenType.type].ids.push(v._id);
            booking_data[key].subData[v.mainChildrenType.type].value += Number(v.money)
          }
        })

        // 将subData转成数组格式
        for (let key in booking_data) {
          let subData = booking_data[key].subData;
          booking_data[key].subDataArray = []
          for (let k in subData) {
            if (subData[k].ids instanceof Array) {
              subData[k].ids = subData[k].ids.join("-");
            }
            let obj = {
              type: k,
              ...subData[k]
            };
            booking_data[key].subDataArray.push(obj);
          }
          // delete booking_data[key].subData;
        }

        // 为每一种子类统计百分比
        this.data.mainType.forEach(v => {
          let data = booking_data[v.type].subDataArray;
          // 定义一个用来存储饼图颜色的数组
          booking_data[v.type].pieColor = []
          data.forEach(value => {
            // 占卜
            value.percont = (value.total / v.total * 100).toFixed(1) + "%"
            value.name += value.percont
            booking_data[v.type].pieColor.push(value.color)
          })
        })

      }
      
      this.setData({
        booking_data,
        mainType: this.data.mainType
      })
      // 调用绘制饼图的方法
      this.grawPie()
      // 关闭加载提示
      wx.hideLoading();


    }).catch(err => {
      
    })
  },

  // 切换收入支出的标签栏
  toggleMainType(e) {
    let index = e.currentTarget.dataset.index;
    if (this.data.main_type_active === index) {
      return
    }
    this.get_booking_by_date()
    this.setData({
      main_type_active: index
    })
  },
  // 根据记账数据绘制饼图
  grawPie() {
    // 获取到处理后分类的数据
    let data = this.data.booking_data[this.data.mainType[this.data.main_type_active].type];
    // 获取到饼图的颜色
    let colors = data.pieColor
    // 获取到饼图的value和name
    let pieData = data.subDataArray
    // 
    var option = {
      backgroundColor: "#ffffff",
      legend: {
        top: 'bottom',
        left: 'center'
      },
      series: [{
        label: {
          normal: {
            fontSize: 14
          }
        },
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['0', '50%'],

        // 需要动态生成的颜色
        color: colors,

        // 需要动态生成饼图的data数据
        data: pieData,
      }]
    };
    charInstance.setOption(option);

  },
  // 在统计点击查看支出-收入的详情
  go_chart_details_fn(e) {
    
    let ids = e.currentTarget.dataset.item
    wx.navigateTo({
      url: `../chart_details/chart_details?ids=${ids}`,
    })

  },

  // 处理时间格式的方法
  today_time(data) {
    let date = data;
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    m = m < 10 ? `0${m}` : m;
    let d = date.getDate()
    d = d < 10 ? `0${d}` : d;

    let today = `${y}-${m}-${d}`;
    return today
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    this.limit_select_end_date()
    // this.Toggle()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.get_booking_by_date()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})